// 投放

import React, { useState, useEffect, EventHandler,useCallback } from 'react';
import Title from '@/pages/component/Title';
import { Radio, RadioChangeEvent } from 'antd';
import { Amap, Marker } from '@amap/amap-react';

export default function put() {
  const [radioVal, setradioVal] = useState<string>('city');
  const [cityRadio, setcityRadio] = useState<string>('');
  const [position, setposition] = useState<number[]|any>([116.473179, 39.993169]);

  const onChange = (e: RadioChangeEvent) => {
    setradioVal(e.target.value);
  };

  const onMarkerDragging = useCallback((marker) => {
    console.log('marker: ', marker);
    const p = marker.getPosition();
    // setPosition([p.getLng(), p.getLat()]);
  }, []);
 

  return (
    <div>
      <Title tit="投放地点"></Title>
      <Radio.Group onChange={onChange} defaultValue="city">
        <Radio.Button value="city">按城市</Radio.Button>
        <Radio.Button value="map">按地图</Radio.Button>
      </Radio.Group>
      {/* 根据选择切换展示类容 */}
      {radioVal === 'city' ? (
        //   按城市
        <div>
          <Radio.Group
            onChange={(e: RadioChangeEvent) => {
              setcityRadio(e.target.value);
            }}
            defaultValue="a"
          >
            <Radio.Button value="a">武汉</Radio.Button>
            <Radio.Button value="b">深圳</Radio.Button>
            <Radio.Button value="c">北京</Radio.Button>
          </Radio.Group>
        </div>
      ) : (
        <div className="map" style={{ width: '500px', height: '500px' }}>
          <p>{position}</p>
          <Amap
            zoom={15}
            center={position}
            onClick={(map) => {
              console.log('map11: ',);
              // setposition(map.lngLatToContainer);
              // console.log(position);
            }}
          >
            <Marker
              position={position}
              label={{
                content: 'Hello, AMap-React!',
                direction: 'bottom',
              }}
              draggable
              onDragging={onMarkerDragging}
            />
          </Amap>
        </div>
      )}

      {/* 九宫格 */}
      <div style={{ width: '500px', height: '500px', display: 'flex', flexWrap: 'wrap' }}>
        <div className="box">1</div>
        <div className="box" style={{ marginLeft: '175px', marginRight: '175px' }}>
          {position}
        </div>
        <div className="box">3</div>
        <div className="box">4</div>
        <div className="box" style={{ marginLeft: '175px', marginRight: '175px' }}>
          5
        </div>
        <div className="box"> {position}</div>
      </div>
    </div>
  );
}
